import TinyReact from './TinyReact'

const root = document.getElementById('root')

const virtualDOM = (
  <div class="container">
    <h1>你好 Tiny React</h1>
    <h2 data-test="test">(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察：这个将会改变)</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段内容</span>
    <button onClick={() => alert("你好")}>点击我</button>
    <h3>这个将会被删除</h3>
    2，3
    <input type="text" value="13"/>
  </div>
)

const modifyDOM = (
  <div class="container">
    <h1>你好 Tiny React</h1>
    <h2 data-test="test123">(编码必杀技)</h2>
    <div>
      嵌套2 <div>嵌套 2.1</div>
    </div>
    <h1>(观察：这个将会改变)</h1>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是修改过的内容</span>
    <button>点击我</button>
    2，3
    <input type="text" value="15"/>
  </div>
)

// TinyReact.render(virtualDOM, root)

// setTimeout(() => {
//   TinyReact.render(modifyDOM, root)
// }, 2000)

function Demo () {
  return <h1>
    Hello
  </h1>
}

function Heart (props) {
  return <div>
    {props.title}
    &hearts;  <Demo />
  </div>

}
// TinyReact.render(<Heart title="Hello React" />, root)

class Alert extends TinyReact.Component {
  constructor (props) {
    super(props)
    this.state = {
      title: 'Default Title'
    }
    // 需要把 handleClick 的 this 指向组件的实例对象
    // 所以需要调用 bind 去改变 this 指向
    this.handleClick = this.handleClick.bind(this)
  }
  componentWillReceiveProps(nextProps) {
    console.log(nextProps)
  }
  componentWillUpdate() {
    console.log('componentWillUpdate')
  }
  componentDidUpdate() {
    console.log('componentDidUpdate')
  }
  handleClick () {
    this.setState({ title: 'Changed Title' })
  }

  render () {
    return <div>
      {this.props.name}
      {this.props.age}
      <div>
        {this.state.title}
        <button onClick={this.handleClick}>改变 title</button>
      </div>
    </div>
  }
}

// TinyReact.render(<Alert name="张三" age={20}/>, root)

// setTimeout(() => {
//   TinyReact.render(<Alert name="李四" age={18}/>, root)
//   // TinyReact.render(<Heart title="组件"/>, root)
// }, 2000)

class DemoRef extends TinyReact.Component{
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    console.log(this.input.value)
    console.log(this.alert)
  }

  componentDidMount() {
    console.log('componentDidMount')
  }

  componentWillUnmount() {
    console.log('componentWillUnmount')
  }

  render() {
    return (
      <div>
        <input type="text" ref={input => (this.input = input)} />
        <button onClick={this.handleClick}>按钮</button>
        <Alert name="张三" age={20} ref={alert => this.alert = alert}/>
      </div>
    )
  }
}

// TinyReact.render(<DemoRef />, root)

class KeyDemo extends TinyReact.Component {
  constructor(props) {
    super(props)
    this.state = {
      persons: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' },
        { id: 4, name: '赵六' }
      ]
    }
    console.log(this.state.persons)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    const newState = JSON.parse(JSON.stringify(this.state))
    // newState.persons.push(newState.persons.shift())
    // newState.persons.splice(1, 0, { id: 100, name: '李逵' })
    newState.persons.pop()
    this.setState(newState)
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.persons.map(person => (
            <li key={person.id}>
              {person.name}
              <DemoRef />
            </li>
          ))}
        </ul>
        <button onClick={this.handleClick}>按钮</button>
      </div>
    )
  }
}

TinyReact.render(<KeyDemo />, root)